<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .el-upload--picture-card i {
            margin-top: 55px;
            font-size: 28px;
            color: #8c939d;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">安全管理台账,三违台账</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <!--                        <el-form-item label="重大危险源名称">-->
                        <!--                            <el-input placeholder="请输入" class="inputW" v-model="riskName"></el-input>-->
                        <!--                        </el-form-item>-->
                        <!--                        <el-form-item label="注册编号">-->
                        <!--                            <el-input placeholder="请输入" class="inputW" v-model="registerNum"></el-input>-->
                        <!--                        </el-form-item>-->
                        <el-form-item label="违规部门">
                            <el-select v-model="departmentId" filterable placeholder="请选择部门"
                                       style="width: 202px;">
                                <el-option
                                        v-for="item in DepartmentData1"
                                        :key="item.DepartmentID"
                                        :label="item.DepartmentName"
                                        :value="item.DepartmentID">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="addBtn">新增三违</el-button>
                            <el-button type="warning" @click="exportGrade">导出台账</el-button>
                            <!--                            <el-button type="success" @click="search">导出模板</el-button>-->
                            <!--                            <el-button type="warning" @click="search">导出特种设备信息</el-button>-->
                            <!--                            <el-button type="primary" @click="search">导入</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="againstType" label="三违行为类型">
                        <template slot-scope="scope">
                            <div v-if="scope.row.againstType == '0'">
                                违章操作行为
                            </div>
                            <div v-if="scope.row.againstType == '1'">
                                违章指挥行为
                            </div>
                            <div v-if="scope.row.againstType == '2'">
                                违反劳动纪律行为
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="againstDESC" label="三违描述"></el-table-column>
                    <el-table-column prop="againstPerson" label="违规人姓名"></el-table-column>
                    <el-table-column prop="DepartmentName" label="违规人部门"></el-table-column>
                    <el-table-column prop="againstPlace" label="违规发生地"></el-table-column>
                    <el-table-column prop="processby" label="登记人"></el-table-column>
                    <el-table-column prop="againstTime" label="登记时间">
                        <template slot-scope="scope">
                            {{scope.row.againstTime.replace("T"," ")}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="againstImg" label="附件">
                        <template slot-scope="scope">
                            <a :href="imageUrl+scope.row.againstImg" class="swipebox" title="ESC键退出">
                                <img :src="imageUrl+scope.row.againstImg" style="max-width:80px;max-height: 80px "/>
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stationName" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="editClick(scope.row)" round size="small" icon="el-icon-edit"></el-button>
                            <el-button icon="el-icon-delete" round size="small"
                                       @click="removeItem(scope.row.Id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-row>

        </el-row>
        <el-dialog :title="'新增台账'" :visible.sync="addFormVisible">
            <el-form :model="addForm" ref="formName" :inline="true" style="margin-left: 55px">
                <el-form-item label="三违行为类型" :label-width="130" :rules="[
                             {required:true,message:'三违行为类型!',trigger:'blur'}
                            ]">
                    <el-select v-model="addForm.againstType" filterable placeholder="三违行为类型"
                               style="width: 202px;">
                        <el-option
                                v-for="item in againstTypeData"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="三违描述" :label-width="130" :rules="[
                             {required:true,message:'三违描述!',trigger:'blur'}
                            ]">
                    <el-input v-model="addForm.againstDESC" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="违规人部门" :label-width="120" :rules="[
                             {required:true,message:'违规人部门!',trigger:'blur'}
                            ]">
                    <el-select v-model="addForm.departmentId" filterable placeholder="违规人部门"
                               style="width: 202px;margin-left: 10px" @change="fnEdit">
                        <el-option
                                v-for="item in DepartmentData"
                                :key="item.DepartmentID"
                                :label="item.DepartmentName"
                                :value="item.DepartmentID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="违规人姓名" :label-width="120" :rules="[
                             {required:true,message:'违规人姓名!',trigger:'blur'}
                            ]">
                    <el-select v-model="addForm.againstPersonId" filterable placeholder="违规人姓名"
                               style="width: 202px;;margin-left: 10px">
                        <el-option
                                v-for="item in DepartUserData"
                                :key="item.Id"
                                :label="item.DepartmentName+item.userName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="违规发生地" :label-width="130" :rules="[
                             {required:true,message:'违规发生地!',trigger:'blur'}
                            ]">
                    <el-input v-model="addForm.againstPlace" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="违规发生时间" :label-width="130" :rules="[
                             {required:true,message:'违规发生时间!',trigger:'blur'}
                            ]">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="addForm.againstTime" placeholder="日期"
                                    style="width:200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="三违处理人员" :label-width="130" :rules="[
                             {required:true,message:'三违处理人员!',trigger:'blur'}
                            ]">
                    <el-select v-model="addForm.processBy" style="width: 200px">
                        <el-option
                                v-for="item in Chargerlist"
                                :key="item.Id"
                                :label="item.userName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传违规照片" :label-width="120" :rules="[
                             {required:true,message:'三违处理人员!',trigger:'blur'}
                            ]">
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="url+'/api/idm/v1/CompanyAgainst/Add'"
                            :headers="headers"
                            name="againstImg"
                            :data="addForm"
                            :limit="1"
                            :auto-upload="false"
                            :on-change="fileChange"
                            :on-success="onSuccess"
                            :on-error="onError"
                            :beforeUpload="beforeAvatarUpload"
                            ref="upload">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitClick('upload')">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="'编辑台账'" :visible.sync="editFormVisible">
            <el-form :model="editForm" ref="formName" :inline="true" style="margin-left: 55px">
                <el-form-item label="三违行为类型" :label-width="130" :rules="[
                             {required:true,message:'三违行为类型!',trigger:'blur'}
                            ]">
                    <el-select v-model="editForm.againstType" filterable placeholder="三违行为类型"
                               style="width: 202px;">
                        <el-option
                                v-for="item in againstTypeData"
                                :key="item.Id"
                                :label="item.Name"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="三违描述" :label-width="130" :rules="[
                             {required:true,message:'三违描述!',trigger:'blur'}
                            ]">
                    <el-input v-model="editForm.againstDESC" autocomplete="off" style="width: 200px"></el-input>
                </el-form-item>

                <el-form-item label="违规人部门" :label-width="120" :rules="[
                             {required:true,message:'违规人部门!',trigger:'blur'}
                            ]">
                    <el-select v-model="editForm.departmentId" filterable placeholder="违规人部门"
                               style="width: 202px;margin-left: 10px" @change="fnEdit">
                        <el-option
                                v-for="item in DepartmentData"
                                :key="item.DepartmentID"
                                :label="item.DepartmentName"
                                :value="item.DepartmentID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="违规人姓名" :label-width="120" :rules="[
                             {required:true,message:'违规人姓名!',trigger:'blur'}
                            ]">
                    <el-select v-model="editForm.againstPersonId" filterable placeholder="违规人姓名"
                               style="width: 202px;;margin-left: 10px">
                        <el-option
                                v-for="item in DepartUserData"
                                :key="item.Id"
                                :label="item.DepartmentName+item.userName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="违规发生地" :label-width="130" :rules="[
                             {required:true,message:'违规发生地!',trigger:'blur'}
                            ]">
                    <el-input v-model="editForm.againstPlace" autocomplete="off" class="itemW"></el-input>
                </el-form-item>
                <el-form-item label="违规发生时间" :label-width="130" :rules="[
                             {required:true,message:'违规发生时间!',trigger:'blur'}
                            ]">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="editForm.againstTime"
                                    placeholder="日期"
                                    style="width:200px"></el-date-picker>
                </el-form-item>
                <el-form-item label="三违处理人员" :label-width="130" :rules="[
                             {required:true,message:'三违处理人员!',trigger:'blur'}
                            ]">
                    <el-select v-model="editForm.processBy" style="width: 200px">
                        <el-option
                                v-for="item in Chargerlist"
                                :key="item.Id"
                                :label="item.userName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传违规照片" :label-width="120" :rules="[
                             {required:true,message:'三违处理人员!',trigger:'blur'}
                            ]">
                    <el-upload
                            class="upload-demo"
                            drag
                            :action="url+'/api/idm/v1/CompanyAgainst/Update'"
                            :headers="headers"
                            name="againstImg"
                            :data="editForm"
                            :limit="1"
                            :auto-upload="false"
                            :on-change="fileChange"
                            :on-success="onSuccess"
                            :on-error="onError"
                            ref="upload2">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editSubmit('upload2')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            url: SiteConfig.webApiset,
            // addFormVisible: false,
            formLabelWidth: '120px',
            currentPage: 1,
            tableData: [],
            addFormVisible: false,
            editFormVisible: false,
            param: {
                // Id: '',
                // riskNo: '',
                // projectNo: '',
                // riskName: '',
                // registerNum: '',
                // workArea: '',
                // currentState: 0,
                // riskType: '',
                // startTime: '',
                // responseBy: '',
                // riskLevel: '',
                // confirmBasi: '',
                // possibleResult: '',
                // controlMeasure: '',
                // surrounding: ''
            },
            editForm: {},
            addForm: {},
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            tableData: [],
            projectNo: '',
            departmentId: '',
            editMod: false,
            Chargerlist: [],
            DepartmentData: [],
            DepartUserData: [],
            Chargerlist: [],
            uploadData: {},
            headers: {
                uid: '',
                token: '',
            },
            refs: '',
            fileList: [],
            againstTypeData: [{Name: '违章操作行为', Id: 0}, {Name: '违章指挥行为', Id: 1}, {Name: '违反劳动纪律行为', Id: 2}],
            imageUrl: '',
            riskLevelData: [{Name: '所有', Id: 0}, {Name: 'I级', Id: 1}, {
                Name: 'II级',
                Id: 2
            }, {Name: 'III级', Id: 3}, {Name: 'IV级', Id: 4}],
            DepartmentData1: [],
        },
        created: function () {
            $('.page').show();
            HttpUtil.get('User/Child').success((r) => {
                if (r.state == 0) {
                    this.Chargerlist = r.data;
                } else {
                    this.$message({type: 'error', message: '修改失败'})
                }
            })
            HttpUtil.get('Department/List', {projectNo: SiteConfig.account.projectNo}).success((r) => {
                if (r.state == 0) {
                    this.DepartmentData = r.data;
                    this.DepartmentData1 = r.data;
                    this.DepartmentData1.push({
                        DepartmentName: '所有',
                        DepartmentID: ' ',
                    })
                }
            })
            HttpUtil.get('User/Child').success((r) => {
                if (r.state == 0) {
                    this.Chargerlist = r.data;
                } else {
                    this.$message({type: 'error', message: '修改失败'})
                }
            })
            // SiteConfig.account.projectNo
            this.projectNo = SiteConfig.account.projectNo;
            this.loadData();
        },
        methods: {
            fileChange(file, fileList) {
                this.fileList = fileList;
            },
            onSuccess(res) {
                if (res.state == 0) {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                    // this.$refs['add'].clearFiles();
                    this.$refs[this.refs].clearFiles();
                    this.fileList = [];
                    this.addVisible = false;
                    this.editVisible = false;
                    this.loadData();
                } else {
                    this.$message({
                        type: 'error',
                        message: '报错!' + res.errMsg
                    });
                }

            },
            onError(err) {
                this.$message({
                    type: 'error',
                    message: '报错!' + err.errMsg
                });
            },
            exportGrade: function (row) {
                HttpUtil.get('CompanyAgainst/Export', {projectNo: SiteConfig.account.projectNo}).success((res) => {
                    this.$message.success('导出成功');
                    window.location = SiteConfig.webApiset + res.data;
                })
            },
            beforeAvatarUpload(file) {
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
                const extension = testmsg === 'xls'
                const extension2 = testmsg === 'xlsx'
                const isLt2M = file.size / 1024 / 1024 < 10
                if (!extension && !extension2) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx格式!',
                        type: 'warning'
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        message: '上传文件大小不能超过 10MB!',
                        type: 'warning'
                    });
                }
                return extension || extension2 && isLt2M
            },
            fnEdit(Id) {
                if (!this.addForm.departmentId) {
                    return;
                }
                HttpUtil.get('CompanyAgainst/getDepartUser', {departmentId: this.addForm.departmentId}).success((r) => {
                    if (r.state == 0) {
                        this.DepartUserData = r.data;
                    }
                })
            },
            editClick(row) {
                this.refs = 'upload2';
                this.editForm = JSON.parse(JSON.stringify(row));
                this.fnEdit(row.departmentId);
                // this.editForm.againstPersonId = parseInt(row.againstPersonId);
                this.editFormVisible = true;
            },
            loadData: function () {
                var param = {};
                if (this.departmentId)
                    param.departmentId = this.departmentId;
                param.projectNo = SiteConfig.account.projectNo;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('CompanyAgainst/List', param).success((res) => {
                    this.tableData = res.data;
                    this.totalCount = res.total;
                });
            },
            addBtn: function () {
                this.refs = 'upload';
                this.param = {};
                this.addFormVisible = true;
            },
            submitClick(name) {
                if (this.addForm.againstType != 0 && this.addForm.againstType != 1 && this.addForm.againstType != 2) {
                    this.$message({type: 'error', message: '三违行为类型不能为空'})
                    return;
                }
                if (!this.addForm.againstDESC) {
                    this.$message({type: 'error', message: '三违描述不能为空'})
                    return;
                }
                if (!this.addForm.departmentId) {
                    this.$message({type: 'error', message: '部门不能为空'})
                    return;
                }
                if (!this.addForm.againstPersonId) {
                    this.$message({type: 'error', message: '违规人不能为空'})
                    return;
                }
                if (!this.addForm.againstPlace) {
                    this.$message({type: 'error', message: '违规发生地不能为空'})
                    return;
                }
                if (!this.addForm.againstTime) {
                    this.$message({type: 'error', message: '违规发生时间不能为空'})
                    return;
                }
                if (!this.addForm.processBy) {
                    this.$message({type: 'error', message: '处理人员不能为空'})
                    return;
                }
                if (this.fileList.length == 0) {
                    this.$message({
                        type: 'info',
                        message: '必须选择文件'
                    });
                    return;
                }
                this.addForm.projectNo = SiteConfig.account.projectNo;
                this.$refs[name].submit();
                // this.$message.success('提交成功');
                this.addFormVisible = false;
                this.loadData();
            },
            editSubmit() {

                if (this.editForm.againstType != 0 && this.editForm.againstType != 1 && this.editForm.againstType != 2) {
                    this.$message({type: 'error', message: '三违行为类型不能为空'})
                    return;
                }
                if (!this.editForm.againstDESC) {
                    this.$message({type: 'error', message: '三违描述不能为空'})
                    return;
                }
                if (!this.editForm.departmentId) {
                    this.$message({type: 'error', message: '部门不能为空'})
                    return;
                }
                if (!this.editForm.againstPersonId) {
                    this.$message({type: 'error', message: '违规人不能为空'})
                    return;
                }
                if (!this.editForm.againstPlace) {
                    this.$message({type: 'error', message: '违规发生地不能为空'})
                    return;
                }
                if (!this.editForm.againstTime) {
                    this.$message({type: 'error', message: '违规发生时间不能为空'})
                    return;
                }
                if (!this.editForm.processBy) {
                    this.$message({type: 'error', message: '处理人员不能为空'})
                    return;
                }
                this.editForm.projectNo = SiteConfig.account.projectNo;
                // this.$refs[name].submit();
                // this.$message.success('提交成功');
                // this.addFormVisible = false;
                // this.loadData();

                if (this.fileList.length == 0) {
                    HttpUtil.post('CompanyAgainst/Update', this.editForm).success((r) => {
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });
                        this.fileList = [];
                        this.editFormVisible = false;
                        this.loadData();
                    })
                } else {
                    this.$refs[name].submit();
                }

                // HttpUtil.get('CompanyAgainst/Update', this.param).success((res) => {
                //     this.$refs['upload2'].submit();
                //     this.$message.success('修改成功');
                //     this.editFormVisible = false;
                //     this.loadData();
                // })
            },
            removeItem: function (id) {
                if (!id) {
                    this.$message({
                        type: 'info',
                        message: 'id为空'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    var p = {};
                    p.Id = id;
                    p.currentState = 1;
                    HttpUtil.get('CompanyAgainst/Delete', p).success((r) => {
                        if (r.state == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadData();
                        } else {
                            this.$message.error('删除失败!');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消消除'
                    });
                });

            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            search: function () {
                this.loadData();
            },
            onCheckbox: function (row) {
            }
        },

        mounted: function () {
            this.headers = {
                uid: SiteConfig.account.uId,
                token: SiteConfig.account.accessToken
            };
            this.imageUrl = SiteConfig.webApiset;
            /* 表格值
            this.eleITableData=[{
                name:'A相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            },{
                name:'B相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            },{
                name:'C相电流',
                max:566,
                maxTime:'2018-3-5 11:11:45',
                min:34,
                minTime:'2018-11-12 15:33:33',
                avg:456
            }];*/


        }
    });
</script>
</body>
</html>
